<template>
	<view>
		<u-navbar title="收货地址">
			<view slot="right" style="margin-right: 24rpx;" class="text-primary" @click="save">保存</view>
		</u-navbar>

		<view class="bg-white">
			<u-field v-model="form.name" :label-width="0" placeholder="姓名"></u-field>
			<u-field v-model="form.mobile" :label-width="0" placeholder="电话"></u-field>
			<u-field v-model="fullcity" :label-width="0" disabled placeholder="省/市/区" @click="show=true"></u-field>
			<u-field v-model="form.detail" :label-width="0" placeholder="详细地址" type="textarea">
			</u-field>
		</view>

		<view class="padding-lr-lg bg-white margin-tb">
			<view class="item bt">
				<text>设为默认地址</text>
				<u-switch class="pure-switch" v-model="df" size="40"></u-switch>
			</view>
		</view>

		<u-picker mode="region" ref="uPicker" v-model="show" @confirm="citySelected"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				show: false,
				df: false,
				form: {
					name: '',
					mobile: '',
					province: '',
					city: '',
					district: '',
					detail: '',
					is_default: ''
				}
			};
		},
		computed: {
			fullcity() {
				return this.form.province + this.form.city + this.form.district
			}
		},
		methods: {
			citySelected(e) {
				this.form.province = e.province.label
				this.form.city = e.city.label
				this.form.district = e.area.label
			},
			save() {
				this.form.is_default = this.df ? 1 : 0
				this.$u.post('/address/insert', this.form).then(res => {
					this.$msg(res.data.msg)
					setTimeout(() => {
						this.$goto(1)
					}, 500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.item {
		height: 100rpx;
		display: flex;
		align-items: center;

		&.on {
			opacity: 0.7;
			transform: translate(1px, 1px);
		}

		&.bt {
			justify-content: space-between;
		}

		.text {
			min-width: 160rpx;
		}

		.radio {
			width: 40rpx;
			height: 40rpx;
			margin-right: 24rpx;
			background: url(../../static/images/ra0.png);
			background-size: 100% 100%;

			&.on {
				background: url(../../static/images/ra1.png);
				background-size: 100% 100%;
			}
		}
	}
</style>
